<template>
	<view>
		<!-- 遮罩层 -->
		<view class="popup-mask" v-show="visible"></view>
		<!-- 弹窗内容 -->
		<view class="popup-container" v-show="visible">
			<view class="popup-content">
				<view class="code-container">
					<view class="qr-code-warps">
						<!-- <image src="/static/official-account.jpg" mode="aspectFill"></image> -->
						<ikun-qrcode width="200" height="200" unit="rpx" color="#000000" :data="code" />
						<!-- <view class="qr-code" id="qrcode"></view> -->
					</view>
					<view class="tips">
						<view>在微信扫一扫识别进入拼车平</view>
						<view>台注册并关注公众号</view>
					</view>
				</view>
				<view class="popup-footer">
					<image src="/static/personalCenter/auth-close.png" mode="aspectFill" @click="close"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import QRCode from 'qrcodejs2';
export default {
	props: {
		visible: {
			type: Boolean,
			default: false
		}
	},

	created() {
		const app = getApp();
		let sharePrefix = app.platform === 'ios' ? uni.getStorageSync('firstIosUrl') : window.location.href.split('#')[0];
		let link = `${sharePrefix}${window.location.hash}`;
		if (link.includes('?')) {
			link = `${link}&pid=${uni.getStorageSync('userInfo').id}`;
		} else {
			link = `${link}?pid=${uni.getStorageSync('userInfo').id}`;
		}

		this.code = link;
	},
	mounted() {},
	watch: {
		visible(val) {
			if (val) {
				this.$nextTick(() => {
					// this.generateQRCode();
				});
			}
		}
	},
	data() {
		return {
			code: '',
			qrContent: 'carpool.mszcdf.cn' // 要生成二维码的内容
		};
	},
	methods: {
		generateQRCode() {
			// 清除旧的二维码
			document.getElementById('qrcode').innerHTML = '';
			// 生成新的二维码
			new QRCode(document.getElementById('qrcode'), {
				text: this.qrContent,
				width: 100,
				height: 100,
				colorDark: '#000000',
				colorLight: '#ffffff',
				correctLevel: QRCode.CorrectLevel.H
			});
		},
		close() {
			this.$emit('update:visible', false);
		}
	}
};
</script>

<style lang="scss" scoped>
.popup-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 999;
}

.popup-container {
	position: fixed;
	top: 10%;
	left: 0;
	right: 0;
	z-index: 999;
	transition: all 0.3s ease;
	margin: 0 76rpx;
}

.popup-content {
	width: 100%;
	min-height: 1040rpx;
	background-image: url('~@/static/personalCenter/posters.png');
	background-size: 100% 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.code-container {
}

.qr-code-warps {
	width: 240rpx;
	height: 240rpx;
	background: #ff7937;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	position: absolute;
	bottom: 172rpx;
	left: 30%;
	display: flex;
	justify-content: center;
	align-items: center;
	image {
		width: 200rpx;
		height: 200rpx;
	}
}

.tips {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-size: 30rpx;
	color: #ff7937;
	text-align: center;
	position: absolute;
	left: 18%;
	bottom: 62rpx;
}

/* 关闭按钮样式 */
.popup-footer {
	position: absolute;
	bottom: -90rpx;
	left: 47%;
}

.popup-footer image {
	width: 48rpx;
	height: 48rpx;
}

canvas {
	position: relative;
	z-index: 10000;
	background-color: white;
}
</style>
